<template>
  <div ref="dom" style="display:block;width: 328px; height: 177px;">
  </div>
</template>

<script>
  export default {
    name: "LineChart",
    props: ['data', 'cfg'],
    data() {
      return {
        chart: null
      }
    },
    watch: {
      data: {
        handler: function (n, o) {
          if (Object.keys(n).length > 0) this.loadChart();
        }
      }
    },
    mounted() {
      setTimeout(()=>{
        this.loadChart();
      },100)
    },
    beforeDestroy() {
      this.destoryChart();
    },
    methods: {
      loadChart() {
        const data = this.data, cfg = this.cfg, echarts = this.$echarts;
        const option = {
          animation:false,
          grid: {
            top: 20,
            left: 50,
            right: 15,
            bottom: cfg.bottom || 10,
            // containLabel: false
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              const p=params[0];
              return p && p['data']===999999 ?'':`${p.name} 能见度 : ${p.data}m`
            }
          },
          title: {
            text: data.name || '',
            left: 'center',
            top: 0,
            textStyle: {
              fontSize: 14,
              fontWeight: 0,
              color: 'rgba(27, 243, 222, .6)'
            }

          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              color: '#999',
              fontSize: 12,
              rotate: cfg['rotate'] || 0
            },
            data: data && data.label || []
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                opacity: 1
              }

            },
            interval: 100,
            // minInterval:50,
            // maxInterval:500,
            max: 1000,
            // splitNumber:4,
            axisLabel: {
              formatter: (a) => {
                return a % 200===0 || a === 100 ? a+(a===1000?'m':'') : ''
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: cfg['splitLineColor'] || '#333',
                width: 0.5
              }
            },
          },
          color: ['#EE6666', '#FAC858', '#3BA272', '#5470C6', '#9A60B4'],
          series: [
            {
              name: data['name'],
              type: 'line',
              smooth: true,
              symbolSize: 0,
              data: data.data,
              markPoint: {
                symbolSize: 4,
                animation: false,
                label: {
                  show: false
                },
                symbol: 'circle',
                data: [
                  {
                    name: '某个屏幕坐标',
                    coord: [0, data.data[0]]
                  },
                  {
                    name: '某个屏幕坐标',
                    coord: [data.label.length - 1, data.data[data.data.length - 1]]
                  }

                ]
              },
            }
          ]
        };


        this.chart = echarts.getInstanceByDom(this.$refs.dom);
        if (this.chart) {
          // chart.clear();
          // chart && chart.dispose();
        } else {
          this.chart = echarts.init(this.$refs.dom, 'macarons');
        }
        this.chart.setOption(option, true);
        this.chart.on('click', event => {
          // console.log(event);

        });
        window.onresize = this.chart.resize;
      },
      destoryChart() {
        this.chart && this.chart.clear();
        this.chart && this.chart.dispose();
        this.chart = null;
      }
    }
  }
</script>

<style scoped>

</style>
